window.addEventListener("load", () => {
	// 粒子背景配置
	const config = {
		selector: "#banner-bg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#c3c3c3", //点颜色
		stroke: "10,10,10", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	// 调用粒子背景
	CanvasParticle(config);

	// banner价格区渲染数据
	const apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	apiData.forEach((v) => {
		$(".idText ul").innerHTML += `<li class="cp">${v.times}次</li>`;
		$(".idText ol").innerHTML += `<li>
										<strong class="fs-16">¥${v.price}</strong>
										<span class="fs-12 fc-999">(约 ${v.unitPrice}元/次),仅限企业实名购买</span>
									 </li>`;
	});
	// 渲染后第一个标签添加激活样式
	$(".idText ul li:nth-child(2)").classList.add("active");
	$(".idText ol li:first-child").classList.add("on");

	// 调用选项卡切换交互函数
	tabs($(".idText ul li"), $(".idText ol li"));

	// 调用页面导航列表交互效果
	changeActive($(".detailsNav ul > li"), "active");

	// 页面导航列表电梯效果
	$(".detailsNav ul li").forEach((v, i) => {
		v.addEventListener("click", () => {
			window.scrollTo({
				top: $(".detailsCard")[i].offsetTop + 430,
				behavior: "smooth",
			});
		});
	});

	// 回到顶部按钮出现位置
	window.onscroll = function () {
		if (document.documentElement.scrollTop >= 800) {
			$(".icon-huidaodingbu").style.opacity = 1;
		} else {
			$(".icon-huidaodingbu").style.opacity = 0;
		}
	};
	// 回到顶部按钮点击事件
	$(".icon-huidaodingbu").addEventListener("click", () => {
		window.scrollTo({
			top: 0,
			left: 0,
			behavior: "smooth",
		});
	});
});
